<template>
  <div class="navbar">
    <!-- 左侧的菜单 -->
    <el-menu :default-active="activeIndex" background-color="var(--bPageBgColor)" mode="horizontal" class="el-menu-left"   >
      <!-- Logo -->
      <el-menu-item index="1" @click="handleClick('all')">
        <img src="https://vuejs.org/images/logo.png" alt="logo" class="logo" />
      </el-menu-item>

      <!-- 菜单项 -->
      <el-menu-item index="2" @click="handleClick('all')" class="menu-item">全部作品</el-menu-item>
      <el-menu-item index="3" @click="handleClick('rank')" class="menu-item">排行</el-menu-item>
      <el-menu-item index="4" @click="handleClick('posts')" class="menu-item post-item">帖子</el-menu-item>
      <el-menu-item index="5" @click="handleClick('product')" class="menu-item shop-item">商城</el-menu-item>
      <el-menu-item index="6" @click="handleClick('buffet_list_show')" class="menu-item code-item">自助随想录</el-menu-item>
    </el-menu>
    
    <!-- 右侧的菜单 -->
    <el-switch v-model="isDark" inline-prompt 
    :active-icon="MoonNight" 
    :inactive-icon="Sunny" 
    active-color="var(--el-fill-color-dark)" 
    inactive-color="var(--el-color-primary)" 
    @change="toggleDark" />
    <div v-if="!useUserStore().loginstatus" class="el-menu-right" >
      <el-link target="_blank" @click="handleClick('login')"><el-text class="mx-1" size="large">登录/注册</el-text></el-link>
    </div>
     
    
    
    <el-menu v-else mode="horizontal" class="el-menu-right" :ellipsis="false" background-color="var(--bPageBgColor)">
    
      <navbarDropdownMenu class="writer-dropdown-menu"></navbarDropdownMenu>
    
     <div>
      <el-menu-item index="1" @click="handleClick('notice')" class="menu-item-msg">
        <el-icon :size="50" class="message-icon-wrapper">
          <el-badge is-dot v-if="hasNewMessages" class="icon-badge red-dot"></el-badge>


          <ChatDotRound  /></el-icon>    
</el-menu-item>
     </div>

     
      <el-dropdown class="user-center" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar class="avatar" :src="user.profilePicture"></el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人资料</el-dropdown-item>
            <el-dropdown-item command="order">个人订单</el-dropdown-item>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    
    </el-menu>
    
  </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { ref,watch } from 'vue';
import { useRouter } from 'vue-router';
import NavbarDropdownMenu from './navbarDropdownMenu.vue';
import { useUserStore } from '@/stores/user';
import { log } from 'console';
import { ElAside, ElImage } from 'element-plus';
import { userInfo } from 'os';
import { eventBus } from '@/WebSocket/eventBus';
import { useDark, useToggle } from '@vueuse/core'
import IconEpSunny from 'element-plus';
import IconEpMoon from 'element-plus';
import { Sunny } from '@element-plus/icons-vue';
import { MoonNight } from '@element-plus/icons-vue';
    const isDark = useDark()
    const toggleDark = () => useToggle(isDark)
    

const user = useUserStore().userInfo;
console.log('/user_info/'+user.id);


const route = useRouter();
const hasNewMessages = ref(false);
// const searchQuery = ref('');
const activeIndex = ref('2');
watch(() => router.currentRoute.value.path, (newPath) => {
  if (newPath === '/') {
    activeIndex.value = '2';
  } else if (newPath === '/rank') {
    activeIndex.value = '3';
  } else if (newPath === '/article_list_search') {
    activeIndex.value = '4';
  } else if (newPath === '/product_list_show') {
    activeIndex.value = '5';
  } else if (newPath === '/buffet_list_show') {
    activeIndex.value = '6';
  }else{
    activeIndex.value = '';
  }
});

// 菜单点击处理
const routesMap = {
  all: '/',
  rank: '/rank',
  posts: '/article_list_search',
  product: '/product_list_show',
  buffet_list_show: '/buffet_list_show',
  profile: '/user_info/'+user.id,
  notice:'/system_notice',
  login: '/login',
};

const handleClick = (menu: string) => {
  if (menu === 'notice') {
    hasNewMessages.value = false
  }
  if (routesMap[menu]) {
    route.push(routesMap[menu]);
  } else {
    activeIndex.value = menu;
  }
};




// 搜索框回车触发
// const search = () => {
//   console.log('搜索内容:', searchQuery.value);
// };

// 个人中心菜单命令处理
const handleCommand = (command: string) => {
  if (command === 'profile') {
    route.push('/user_info/'+user.id);
  }
  if (command === 'order') {
    route.push('/order_list_show');
  } 
  else if (command === 'settings') {
    console.log('进入设置');
    route.push('/user_center');
  } else if (command === 'logout') {
  useUserStore().logout();
  if(!useUserStore().loginstatus){
    route.push('/login')
  }
    console.log('退出登录');
  }
};
eventBus.on('message-received', (_) => {
  hasNewMessages.value = true
})
</script>

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: var(--bPageBgColor);
  border-bottom: 1px solid #e6e6e6;
}

.el-menu-left {
  display: flex;
  align-items: center;
  flex-grow: 0.9; /* 左侧菜单占据空间 */
}


.el-menu-left el-menu-item {
  padding: 0 15px;
  
}
.el-menu-right {
  display: flex;
  align-items: center;
  padding-right: 30px;
  justify-content: flex-end;
  width: 30%;
}

.logo {
  height: 30px;
  width: 30px;
  margin-right: 10px;
}

.menu-item {
  padding: 0 15px;
  line-height: 56px; /* 菜单项高度 */
  font-size: 16px;
}

 .menu-item-msg {
  margin-right: 20px;
  line-height: 56px; /* 菜单项高度 */
  font-size: 16px;
}
.message-icon-wrapper {
  position: relative;
}

.red-dot {
  position: absolute;
  top: -31px;
  right: -5px;
}
.search-container {
  display: flex;
  align-items: center;
  margin-left: 20px; /* 搜索框间距 */
}

/* .search-input {
  width: 250px;
} */

.writer-dropdown-menu {
  margin-right: 50px; /* 个人中心间距 */
}

.user-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  height: 42px;
  width: 42px;
}
.el-menu-item.is-active {
  background: var(--selectRowBgColor) !important;
}

.el-submenu__title:hover{

  background-color:  var(--bPageBgColor) !important; 

}



.el-menu-item:hover {

 background-color: var(--bPageBgColor) !important;

}


/* 响应式布局，控制菜单项的显示与隐藏 */
@media (max-width: 1276px) {
  .code-item {
    display: none;
  }
  .search-container {
    display: none;
  }
}

@media (max-width: 1000px) {
  .shop-item {
    display: none;
  }
}

@media (max-width: 800px) {
  .post-item {
    display: none;
  }
}

@media (max-width: 600px) {
  .menu-item {
    display: none;
  }
}
</style>
<style>
.el-menu-item.is-active {
  background: var(--selectRowBgColor) !important;
}

.el-submenu__title:hover{

  background-color:  var(--bPageBgColor) !important; 

}



.el-menu-item:hover {

 background-color: var(--bPageBgColor) !important;

}</style>
